import React from 'react'
import { Card, Avatar } from 'antd'
import { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';


function Mycard() {
    return (
        <div>
            <Card hoverable
                  title="Card title"
                  extra={
                      <a href="#">
                          more
                      </a>
                  }
                style={{
                    width: 300,
                    // display:'flex'
                }}

                styles={{header:{background:'red'},body:{background:'green'}}}
                cover={
                    <img
                        alt="example"
                        src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
                    />
                }
                actions={[
                    <SettingOutlined key="setting" />,
                    <EditOutlined key="edit" />,
                    <EllipsisOutlined key="ellipsis" />,
                ]}
            >
                <Card.Meta
                    avatar={<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=8" />}
                    title="Card title"
                    description="This is the description"
                />
            </Card>
        </div>
    )
}

export default Mycard